<template>
	<view style="padding: 16upx;">
		<view style="background-color: #FFFFFF;">
			<view style="padding-left: 24upx;padding-top:24upx;padding-bottom:24upx;">
				<textarea style="width: 670upx;height:180upx; border: solid 1upx #cccccc;" />
			</view>
			<view class="submeida">
				<view class="medialine">
					<view style="width: 300upx;text-align: center;">
						<view class="photo"></view>
						<view class="phototext">点击拍照或录像</view>
					</view>
				</view>
				<view class="medialine">
					<view style="width: 300upx;text-align: center;">
						<view class="audio" ></view>
						<view class="audiotext" @click="btnclick(item)">点击开始录音,再点击停止</view>
					</view>
				</view>
			</view>
			<view class="reportsalfExecontent">
				<view class="reportsalfExeimg">
				</view>
				<view class="reportsalfExeimg">
				</view>
				<view class="reportsalfExeimg">
					<image src="../../../static/icon/18.png" mode=""></image>
				</view>
			</view>
			<view class="reportContent">
				<view style="padding-top: 24upx;padding-bottom: 48upx;">
					<view class="recordaudioarea">
						<view>
							<image style="width: 28upx;height: 44upx;" src="../../../static/icon/17.png"></image>
						</view>
						<view style="padding-left: 16upx;color:#666666">
							rec_20200820_33877.amr
						</view>
					</view>
					<view class="recordaudioarea">
						<view>
							<image style="width: 28upx;height: 44upx;" src="../../../static/icon/17.png"></image>
						</view>
						<view style="padding-left: 16upx;color:#666666">
							rec_20200820_33877.amr
						</view>
					</view>
					<view class="recordaudioarea">
						<view>
							<image style="width: 28upx;height: 44upx;" src="../../../static/icon/17.png"></image>
						</view>
						<view style="padding-left: 16upx;color:#666666">
							rec_20200820_33877.amr
						</view>
					</view>
				</view>
			</view>
			<view style="position: absolute;bottom: 1upx;width: 720upx;">
				<button type="primary" loading="false">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
    data() {
        return {
            text: 'uni-app',
            voicePath: ''
        }
    },
    onLoad() {
        let self = this;
        recorderManager.onStop(function (res) {
            console.log('recorder stop' + JSON.stringify(res));
            self.voicePath = res.tempFilePath;
        });
    },
    methods: {
			btnclick:function(item){
				this.$emit('item-click',item)
			},
        startRecord() {
            console.log('开始录音');

            recorderManager.start();
        },
        endRecord() {
            console.log('录音结束');
            recorderManager.stop();
        },
        playVoice() {
            console.log('播放录音');

            if (this.voicePath) {
                innerAudioContext.src = this.voicePath;
                innerAudioContext.play();
            }
        }
    }
}
</script>

<style>
	.submeida{
		width: 100%;
		display: flex;
		padding-top: 72upx;
		padding-bottom: 80upx;
	
	}
	.medialine{
		flex: 1;
	}
	.photo{
		width: 116upx;
		height: 116upx;
		position: relative;
		left: 180upx;
		background:url(../../../static/icon/19.png);
		background-size: 100% 100%;
	}
	.phototext{
		font-size: 26upx;
		color: #333333;
		position: relative;
		left: 90upx;
		padding-top: 16upx;
	}
	.audio{
		width: 116upx;
		height: 116upx;
		position: relative;
		left: 120upx;
		background:url(../../../static/icon/20.png);
		background-size: 100% 100%;
	}
	.audiotext{
		font-size: 26upx;
		color: #333333;
		position: relative;
		left: 20upx;
		padding-top: 16upx;
	}
	.reportContent{
		
	}
	.reportsalfExe{
		padding-top: 24upx;
		color: #666666;
	}
	.reportsalfExecontent{
		border-top: solid 1upx #f65656;
		display: flex;
		padding-top: 24upx;
		padding-left: 24upx;
		padding-bottom: 24upx;
	}
	.reportsalfExeimg{
		width: 88upx;
		height: 88upx;
		margin-right: 20upx;
		background: url(../../../static/icon/attachment.png);
		background-size: 100% 100%;
	}
	.reportsalfExeimg image{
		position: relative;
		left: 28upx;top:28upx;
		width: 32upx;
		height: 32upx;
	}
	.recordaudioarea{
		display: flex;flex-direction: row;
		padding-top: 24upx;
		padding-left: 24upx;
	}
</style>
